<template>
  <div style="background-color: white; margin-bottom: 80px">
    <div v-if="uploadStore.getProgress" class="progress">
      <div v-bind:style="{ width: uploadStore.getProgress + '%' }"></div>
    </div>
    <div v-if="url.startsWith('/share/')">
      <router-view></router-view>
    </div>

    <div v-else>
      <sidebar></sidebar>
      <main>
        <router-view></router-view>
        <shell
          v-if="
            enableExec && authStore.isLoggedIn && authStore.user?.perm.execute
          "
        />
      </main>
    </div>

    <prompts></prompts>
    <upload-files></upload-files>
    <div class="footer">
      <el-text class="copyright"
        >Copyright © 2024-2025 机械工业信息中心
      </el-text>
      <el-space :size="5" :spacer="spacer">
        <!--    <el-link href="/help" target="_blank">使用帮助</el-link>-->
        <!--    <el-link href="/team" target="_blank">技术支持</el-link>-->
        <el-link href="https://www.miic.com.cn/about" target="_blank"
          >关于我们
        </el-link>
      </el-space>
      <!--      <page-footer/>-->
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from "@/stores/auth";
import { useLayoutStore } from "@/stores/layout";
import { useFileStore } from "@/stores/file";
import { useUploadStore } from "@/stores/upload";
import Sidebar from "@/components/Sidebar.vue";
import Prompts from "@/components/prompts/Prompts.vue";
import Shell from "@/components/Shell.vue";
import UploadFiles from "@/components/prompts/UploadFiles.vue";
import { enableExec } from "@/utils/constants";
import { computed, h, onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElDivider } from "element-plus";

const layoutStore = useLayoutStore();
const authStore = useAuthStore();
const fileStore = useFileStore();
const uploadStore = useUploadStore();
const route = useRoute();
const activeMenu = ref();
const url = ref("");

watch(route, () => {
  fileStore.selected = [];
  fileStore.multiple = false;
  if (layoutStore.currentPromptName !== "success") {
    layoutStore.closeHovers();
  }
});
onMounted(() => {
  // console.log('Menu获取路由===1', router.getRoutes())

  // 动态设置默认选中的菜单项
  activeMenu.value = computed(() => route.path); // 绑定当前路由路径
  url.value = activeMenu.value.value;
  console.log("activeMenu===", activeMenu.value.value);
});

const spacer = h(ElDivider, { direction: "vertical" });
</script>
<style scoped>
.footer {
  z-index: 1000;
  position: fixed;
  left: 0;
  bottom: 0px;
  background-color: var(--el-fill-color);
  width: calc(100%);
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  border-top: 1px var(--el-border-color) var(--el-border-style);

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
